{% extends "base.html" %}

{% block ring_li %}class="active"{% endblock ring_li %}

{% block head %}
<style>
  .ring_box {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 3px;
    border: 1px solid black;
    height: 80px;
    text-align: center;
    transition: box-shadow 0.25s ease-in-out;
    -webkit-transition: -webkit-box-shadow 0.25s ease-in-out;
    -moz-transition: -moz-box-shadow 0.25s ease-in-out;
    -moz-border-radius: 15px;
    border-radius: 5px;
  }
  
  a:hover {
    text-decoration:none;
  }
  
  .ring_box:hover {
    box-shadow: 0 0 10px rgba(0, 0, 255, 1);
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 255, 1); 
    -moz-box-shadow: 0 0 10px rgba(0, 0, 255, 1);
    background-color: #EEEEFF;
  }
  
  .ring-label {
    
  }
  
  #ring7, #ring8, #ring_warmup {
    height: 100px;
  }
  
  #ring1, #ring2, #ring3 {
    height: 140px;
  }
  
  #ring3:hover {
    background-color: #EEFFEE;
  }
  
  #ring_warmup:hover {
    background-color: #EEEEEE;
  }
  
  #ring5 {
    
  }
  
  #ring6 {
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    height: 50px;
  }
</style>
{% endblock %}

{% block breadcrumb %}
<li>
  <a href="/rings">Rings</a> <span class="divider">/</span>
</li>
{% block sub_breadcrumb %}
  <li class="active">
    <a href="/rings">Select a ring</a>
  </li>
{% endblock sub_breadcrumb%}
{% endblock breadcrumb %}

{% block navi %}
{% for ring, meta_data in rings %}
  {% if ring.number == 0 %}
  {% else %}
  <li><a href="/ring/{{ring.number}}">
    Ring {{ring.number}}
    <span class="label">{{meta_data.num_unfinished_events}}</span>
  </a></li>
  {% endif %}
{% endfor %}
{% endblock navi %}

{% block content %}
<div class="row">
  <div class="span3">
    <a href="/ring/6">
      <div class="ring_box" id="ring6">Ring 6 <div class="ring-label">Push hands</div></div>
    </a>
    <a href="/ring/5">
      <div class="ring_box" id="ring5">Ring 5 <div class="ring-label">Traditional</div></div>
    </a>
    <a href="/ring/4">
      <div class="ring_box" id="ring4">Ring 4 <div class="ring-label">Traditional</div></div>
    </a>
  </div>
  <div class="span2">
    <a href="/ring/7">
      <div class="ring_box" id="ring7">Ring 7 <div class="ring-label">Internal</div></div>
    </a>
    <a href="/ring/3">
      <div class="ring_box" id="ring3">Ring 3 <div class="ring-label">Contemporary</div></div>
    </a>
  </div>
  <div class="span2">
    <a href="/ring/8">
      <div class="ring_box" id="ring8">Ring 8 <div class="ring-label">Internal</div></div>
    </a>
    <a href="/ring/2">
      <div class="ring_box" id="ring2">Ring 2 <div class="ring-label">Contemporary</div></div>
    </a>
  </div>
  <div class="span2">
    <div class="ring_box" id="ring_warmup">Warmup Area</div>
    <a href="/ring/1">
      <div class="ring_box" id="ring1">Ring 1 <div class="ring-label">Contemporary</div></div>
    </a>
  </div>
</div>
{% endblock content %}